<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>
        Add labels to a FeatureLayer | Sample | ArcGIS API for JavaScript 4.18
    </title>

    <link rel="stylesheet" href="https://js.arcgis.com/4.18/esri/themes/light-green/main.css" />

    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
            background-color: black;
        }
    </style>

    <script src="https://js.arcgis.com/4.18/"></script>

    <script>
        require([
            "esri/WebMap",
            "esri/views/MapView",
            "esri/layers/FeatureLayer",
            "esri/widgets/Search",
            "esri/layers/support/LabelClass"
        ], function (WebMap, MapView, FeatureLayer, Search,LabelClass) {
            //为图层上的标签定义标签表达式、符号、比例范围、标签优先级和标签放置选项
            let labe=new LabelClass({
                labelPlacement:"above-center",//标签范围
                symbol:{
                    type:"text",//TextSymbol,文本标签
                    color: "green",
                    font: {
                        // autocast as new Font()
                        family: "Playfair Display",
                        size: 12,
                        weight: "bold"
                    }
                },
                //定义 FeatureLayer 的标签文本内容。如果使用 MapImageLayer，请改用 labelExpression
                labelExpressionInfo:{
                    expression : "$feature.MARKER_ACTIVITY"
                }
            });


            let featureLayer = new FeatureLayer({
                portalItem: {
                    id: "6012738cd1c74582a5f98ea30ae9876f"
                },
                //为图层上的标签定义标签表达式、符号、比例范围、标签优先级和标签放置选项(添加文字标签)
                labelingInfo:[labe],
                //将地图中的点变为绿色
                renderer:{
                    type:"simple",
                    symbol:{
                        type: "simple-marker",//简单标记
                        color: "rgba(0,100,0,0.6)",
                        size: 3,
                        //用于在 2D MapView 中渲染 2D折线几何图形。SimpleLineSymbol 还用于渲染标记符号和填充符号的轮廓
                        outline:{
                            color: [0, 0, 0, 0.1],
                            width: 0.5
                        }
                    }
                }
            });

            let map = new WebMap({
                portalItem: {
                    id: "372b7caa8fe340b0a6300df93ef18a7e"
                },
                layers: [featureLayer]
            });

            const view = new MapView({
                container: "viewDiv",
                map: map,
                center: [-116.925, 34.2501],
                zoom: 13
            });

            // 将搜索小部件添加到视图的右上角
            view.ui.add(
                new Search({
                    view: view
                }),"top-right");
        });
    </script>
</head>

<body>
<div id="viewDiv"></div>
</body>
</html>
